问题描述

修改 grafana 界面无法显示图片和视频的错误。

影响范围

所有使用 grafana 界面显示图片和视频的场景。

报错日志

• 无

根因

图片和视频的 url 路径错误

• 图片和视频的路径变量值是测试域名地址https://changeme.example.org。
• 图片默认生成是png，而路径变量中指定的是jpg后缀，所以图片路径错误。

排查过程

1. 使用 f12 进入浏览器开发者模式，检查图片和视频的 url 路径是否正确

2. 发现图片和视频的 url 路径错误

   

   

快速恢复

1. 修改 grafana 面板的变量值

   • 将resulturl变量值修改为实际存储服务器的 ip 地址（默认是本机 nginx 托管，所以填写本地 ip 地址即可）：http://ip，如果是域名访问，则需要填写：https://domain:port。
   • 将screenshottype变量值修改为jpg。

   如果 grafana 服务配置了 SSL 证书

   则存储图片和视频的服务器也必须配置 SSL 证书,然后通过 https 访问，并且需要将resulturl变量值修改为：https://domain:port/path。 否则访问 grafana 服务时会显示非安全访问的警告。

   

   

2. 修改 grafana 面板中图片和视频的链接路径

   • 进入编辑页面

   

   • 将图片路径替换为下方链接

     <a
       href="$resulturl/$testname/$group.$page.$browser.$connectivity.$screenshottype"
     >
       <img
         src="$resulturl/$testname/$group.$page.$browser.$connectivity.$screenshottype"
     /></a>

     

   • 进入视频模块，将视频路径替换为下方链接（其中autoplay参数是自动加载视频并播放）

     <video
       controls
       autoplay
       width="100%"
       src="$resulturl/$testname/$group.$page.$browser.$connectivity.mp4"
     ></video>

     

长期措施

• 同快速恢复

参考

• 无